<template>
    <div class="banner">
        <swiper ref="mySwiper" :options="swiperOptions"  @clickSlide="handleSlideClick" @slideChange="onSlideChange" @reachEnd="onReachEnd">
            <swiper-slide v-for="(i, d) in list" :key="'slide-' + i.id + '-' + d">
                <div class="silder_img"  >
                    <div  class="a" :style="{
                        opacity: i.txt ? 1 : 0,
                        backgroundImage: `url(${getImageUrl(i.url)})`
                    }"></div>
                    <img class="b" v-if="current == d || !i.txt" :class="{ txt: i.txt }"
                        :data-aos="i.txt ? 'fade-up' : ''" data-aos-easing="linear" data-aos-duration="1000"
                        :src="getImageUrl(i.txt ? i.txt : i.url)"
                        :style="{ cursor: i.link ? 'pointer' : 'default' }" loading="lazy">
                    <img v-if="i.txt2 && current == d" class="txt2" data-aos="fade-up" data-aos-delay="800"
                        data-aos-easing="linear" data-aos-duration="1000" :src="getImageUrl(i.txt2)" loading="lazy">
                </div>
            </swiper-slide>
        </swiper>
        <div class="dot1" v-if="dotType == 1">
            <div class="dot">
                <div @click="goTo(d + 1)" v-for="(i, d) in list" :key="i.id">
                    <span :class="{ fillColor: fillColor && d == current }"
                        :style="{ backgroundColor: d == current ? '#000' : '#ABABAB' }"></span>
                </div>
            </div>
        </div>
        <div class="dot2" v-if="dotType == 2">
            <div class="dot">
                <div @click="goTo(d + 1)" v-for="(i, d) in list" :key="i.id">
                    <span :class="{ fillColor: fillColor && d == current }"
                        :style="{ backgroundColor: d == current ? '#000' : '#ABABAB' }"></span>
                </div>
            </div>
        </div>
        <div v-if="butType == 1" class="switch1">
            <img @click="goPrev" src="@/assets/img/left.png" alt="">
            <img @click="goNext" src="@/assets/img/right.png" alt="">
        </div>
        <div v-if="butType == 2" class="switch2">
            <img @click="goPrev" src="@/assets/img/left.png" alt="">
            <img @click="goNext" src="@/assets/img/right.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'mobSwiper',
    props: {
        list: {
            type: Array,
            default: () => {
                return [
                    { id: 1, url: 'http://test2.woyii.com/upload/admin/20250710/9721980c3ca6ba5b9f7639662de1e168.jpg' },
                    { id: 2, url: 'http://test2.woyii.com/upload/admin/20250710/9721980c3ca6ba5b9f7639662de1e168.jpg' }
                ]
            }
        },
        dotType: {
            type: Number,
            default: 1
        },
        butType: {
            type: Number,
            default: 1
        },
        autoplay: {
            type: Boolean,
            default: true
        },
        fillColor: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            imageCache: {},
            swiperOptions: {
                loop: true,
                loopAdditionalSlides: 1,
                loopFillGroupWithBlank: false,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                keyboard: {
                    enabled: true,
                    onlyInViewport: true,
                },
                preloadImages: false,
                lazy: {
                    loadPrevNext: true,
                    loadPrevNextAmount: 2,
                    loadOnTransitionStart: true
                },
                watchSlidesProgress: true,
                watchSlidesVisibility: true
            },
            current: 0,
            curType: ''
        }
    },
    watch: {
        list: {
            handler() {
                this.$nextTick(() => {
                    this.swiper.slideTo(1);
                    this.swiper.update();
                    this.preloadImages();
                });
            },
            immediate: true,
            deep: true
        },
        autoplay: {
            handler(n) {
                if (n) {
                    this.swiperOptions.autoplay = {
                        delay: 4000,
                        disableOnInteraction: false,
                    };
                } else {
                    this.swiperOptions.autoplay = false;
                }
                this.$nextTick(() => {
                    if (this.swiper) {
                        this.swiper.update();
                    }
                });
            },
            immediate: true
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.$swiper;
        }
    },
    mounted() {
        this.preloadImages();
        this.$nextTick(() => {
            if (this.swiper) {
                this.swiper.update();
            }
        });
    },
    methods: {
        getImageUrl(url) {
            if (!url) return '';
            if (!this.imageCache[url]) {
                this.imageCache[url] = url + '?v=1.0';
            }
            return this.imageCache[url];
        },
        preloadImages() {
            const uniqueUrls = new Set();

            this.list.forEach(item => {
                if (item.url) uniqueUrls.add(item.url);
                if (item.txt) uniqueUrls.add(item.txt);
                if (item.txt2) uniqueUrls.add(item.txt2);
            });

            Array.from(uniqueUrls).forEach(src => {
                const img = new Image();
                img.src = this.getImageUrl(src);
            });
        },
        handleSlideClick(swiper,e) {
            console.log(swiper,e);
            
      // 获取当前真实 slide 的索引（Swiper 会自动处理循环索引）
      // 获取对应的数据项
      const clickedItem = this.list[e];
      if (clickedItem && clickedItem.link) {
        this.goLink(clickedItem.link);
      }
    },
        goLink(url) {
            console.log(url);
            
            if (!url) return;

            if (!/^https?:\/\//i.test(url)) {
                const route = this.$router.resolve({
                    path: url,
                });
                window.open(route.href, '_blank');
            } else {
                window.open(url, '_blank');
            }
        },
        choseType(id) {
            this.curType = id;
            this.$emit('typeChange', id);
        },
        goNext() {
            this.swiper.slideNext();
        },
        goPrev() {
            this.swiper.slidePrev();
        },
        goTo(index) {
            this.swiper.slideTo(index);
        },
        onSlideChange() {
            this.current = this.swiper.realIndex;
        },
        onReachEnd() {
            // console.log('已到达最后一张幻灯片');
        },
        startAutoplay() {
            this.swiper.autoplay.start();
        },
        stopAutoplay() {
            this.swiper.autoplay.stop();
        },
        updateSwiper() {
            this.swiper.update();
        }
    }
}
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
    height: 951px;
    position: relative;
}

.silder_img {
    width: 100%;
    height: 951px;
    position: relative;

    >div {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .txt2 {
        position: absolute;
        z-index: 221;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }

    .txt {
        position: absolute;
        z-index: 222;
        top: 0;
        left: 0;
        width: 100vw;
        height: auto;
    }
}

.dot1 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 54px;
    width: 100%;
    z-index: 22;

    .dot {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 18px;
        background-color: #fff;
        border-radius: 28px;

        >div {
            padding: 0 5px;
            cursor: pointer;

            >span {
                display: block;
                height: 7px;
                width: 7px;
                border-radius: 50%;
            }

            .fillColor {
                border-radius: 20px;
                width: 30px;
                position: relative;
                background-color: #ABABAB !important;
                overflow: hidden;

                &::before {
                    content: '';
                    border-radius: 20px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 100%;
                    background-color: #000;
                    animation: fillPseudo 4s ease-in-out forwards;
                }
            }
        }
    }
}

@keyframes fillPseudo {
    100% {
        width: 100%;
    }
}

.dot2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 114px;
    width: 100%;
    z-index: 22;

    .dot {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 28px;
        border-radius: 28px;

        >div {
            padding: 0 20px;
            cursor: pointer;

            >span {
                display: block;
                height: 20px;
                width: 20px;
                border-radius: 50%;
                margin: 0 20px;
                background-color: #000;
            }

            .fillColor {
                border-radius: 20px;
                width: 80px;
                position: relative;
                background-color: #ABABAB !important;

                &::before {
                    content: '';
                    border-radius: 20px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 0;
                    height: 100%;
                    background-color: #000;
                    animation: fillPseudo 4.5s ease-in-out forwards;
                }
            }
        }
    }
}

.switch1,
.switch2 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: center;
    z-index: 22;
    width: 100%;
    padding: 0 60px;
    bottom: 50%;

    img {
        cursor: pointer;
        width: 30px;
        height: auto;
    }
}

.switch2 {
    bottom: calc(50% - 15px);
}
</style>